<template>
  <main>
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
      <!-- 搜索组件 -->
      <searchComVue></searchComVue>
      <!-- 轮播图组件  -->
      <bannerCom :bannerArr="bannerArr"></bannerCom>
      <!-- 宫格组件 -->
      <gridCom></gridCom>
      <!-- 秒杀组件 -->
      <seckillCom></seckillCom>
      <!-- 商品列表 -->
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item.proid" @click="goDetial(item.proid)">
          <img :src="item.img1" alt="">
          <p>{{ item.proname }}</p>
          <p class="price">${{ item.originprice }}</p>
        </van-cell>
      </van-list>
    </van-pull-refresh>



  </main>
</template>

<script setup lang="ts">
// import { Toast } from 'vant';
// 引入搜索组件
import searchComVue from '@/components/home/searchCom.vue';
// 引入轮播图组件
import bannerCom from '@/components/home/bannerCom.vue'
// 引入宫格组件
import gridCom from '@/components/home/grid/gridCom.vue'
// 引入接口。
import { bannerApi, productlListApi } from '@/api/homeAPI.js'
// 引入秒杀组件
import seckillCom from '@/components/home/seckillCom.vue'
import {useRouter} from 'vue-router'
import { onMounted, ref } from 'vue'

const Router = useRouter()
// 定义轮播图数组
var bannerArr = ref([])
// 定义频道数组


getBannerApi()
// 调用轮播图列表接口的方法
async function getBannerApi(): Promise<void> {
  let res = await bannerApi()
  console.log('首页数据', res);
  bannerArr.value = res.data
  console.log('轮播图数据', bannerArr);

}


const list: any = ref([]);//定义商品列表数据
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const count = ref(1)
const limitNums = ref(10)
// 调用商品列表接口
interface good {
  count: number,
  limitNum: number
}

// loading:控制数据的加载，false 代表没有正在刷新，true 代表正在刷新
// finished : 控制数据是否加载完毕，true 代表数据全部加载完，false 代表数据没有加载完
// onLoad方法 :获取数据
// loading 、finished 值在data中进行设置，下拉时，loading会由false变为 true，代表正在刷新，并且获取数据，当数据获取到后，loading 又变为 false

// 上拉加载
const onLoad = () => {
  let values: good = {
    count: count.value++,
    limitNum: limitNums.value
  }
  productlListApi(values).then((res: any) => {
    console.log('商品列表数据', res);
    // 根据下拉状态判断商品列表的数据显示
    // 下拉刷新
    if (refreshing.value) {
      list.value = [];//清空商品列表数据
      refreshing.value = false;//让下拉状态变为false
    }
    if (res.code == '200') {
      list.value = list.value.concat(res.data)
      // 加载状态结束
      loading.value = false;
    }
    if (list.value.length == 0) {
      finished.value = true;
    }

  })
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  // 重新设置页数为第一页
  count.value = 1
  onLoad();
};

// 点击商品列表某项，跳转对应的详情页面并把商品id传给详情页
function goDetial(itemId:any){
  Router.push({path:'details',query:{itemId:itemId}})
}






</script>
<style scoped lang="scss">
.van-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .van-cell {
    width: 50%;

    img {
      width: 90%;
    }

    p {
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .price {
      font-size: 18px;
      color: red;
      font-weight: bold;
    }
  }
}

:deep(.van-list__finished-text) {
  margin: 0 auto;
}
</style>
